<template>
  <!-- 顶部标题 -->
  <view class="Login">
      <!-- 导航栏内提示区 -->
       <transition name="slide-fade">
    <view v-if="showNavTip" class="nav-tip">{{ navTipText }}</view></transition>

    <view class="Login1">
      <view class="Login1-2">
        <image class="logo" src="@/static/log/LoginLogo.png" @click="tiaozuan"></image>
        <!-- <img src="/src/static/log/LoginLogo.png" alt="" /> -->
      </view>
      <view class="Login1-3">
        <text class="Login1-3-text">防差错配料系统</text>
      </view>
      <view class="Login1-4">
        <view class="Login1-4-0">

          <view class="Login1-4-1">
            <!-- <input class="uni-input" v-model="use" focus placeholder="请输入账号" />-->
            <input class="uni-input" :focus="focususe" @confirm="confirmuse" placeholder="请输入账号" v-model="use" />
            <image class="password-icon   " :src="showClearIcon ? '/static/icon/svg/close.svg' : ''"  @click="clearIcon"
              mode="widthFix"></image>
          </view>

          <view class="Login1-4-1">
            <input class="uni-input  fixed-size-input" :focus="focuspad" @confirm="confirmpad" :placeholder="$t('login.请输入密码')"
              v-model="pad" :password="showPassword"></input>
            <image class="password-icon fixed-size-as  "
              :src="showPassword ? '/static/icon/svg/eye-close.svg' : '/static/icon/svg/eye-clos.svg'"
              @click="changePassword" mode="widthFix"></image>
          </view>



        </view>
      </view>

      <!-- //记住密码 -->
      <view class="Login1-5">
        <checkbox-group>
          <checkbox value="psw" color="#09CC86" />记住账号密码
        </checkbox-group>
      </view>
      <!-- 登录 -->
      <view class="Login1-6">
        <button type="submit" class="Login1-6-button" @click="validateForm">{{ $t('common.login') }}</button>
      </view>

      <view class="Login1-7">
        <view class="Login1-7-1">
          <image src="@/static/icon/system2.png" style="width: 17px; height: 17px; margin-right: 5px"></image>
          <view class="Login1-7-text1" @click="switchLang('zh-CN')"> 中文</view>
        </view>
        <view class="Login1-7-3">|</view>
        <view class="Login1-7-2">
          <image src="@/static/icon/system3.png" style="width: 30px; height: 30px"></image>
          <view class="Login1-7-text2" @click="switchLang('en-US')">英文</view>
        </view>
      </view>
    </view>
    <view class="Login1-8">
      <view class="Login1-8-1"> </view>
      <view class="Login1-8-2">
        <view class="Login1-8-2-1">技术支持：生产部iT组</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// #region 账号
let use = ref<string>(""); // 定义一个响应式变量 value，用于绑定输入框的
let focususe = ref<boolean>(true);//账号输入框焦点开始自动获取家电
let showClearIcon = ref<boolean>(false);//清除账号图标
const clearIcon = function () {
  use.value = '';
  showClearIcon.value = false;
};

//账号输入框回车时
const confirmuse = () => {
  focususe.value = false;
  focuspad.value = true;

}
// #endregion

// #region 密码
let pad = ref<string>(""); // 定义一个响应式变量 pad，用于绑定输入框的密码
let focuspad = ref<boolean>(false);//密码输入框焦点开始自动获取家电
let showPassword = ref<boolean>(true);//密码图标
const changePassword = () => {
  showPassword.value = !showPassword.value;
};
//密码输入框回车时
const confirmpad = () => {
  validateForm();
}
// #endregion


//用于跳转到另一个登录页
const tiaozuan = () => {
  // uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  uni.navigateTo({
    url: '/pages/Login/Login2'
  });
}

//顶部弹出提示栏
let  showNavTip=ref<boolean>(false) ;  
let  navTipText=ref<string>("");

 const handleLogin = (title: string, ins?: number) => {
    // 登录成功后
    showNavTip.value = true;
    navTipText.value = title;
    // 3秒后自动隐藏
    setTimeout(() => showNavTip.value = false, ins?ins:3000);
  }


// #region 登录功能块

//监听输入内容
//判断输入内容是否有空格
const  validateAccount=(value:string,typea: string): boolean => {
  let accountError;
  // 正则表达式：检查是否包含任何空格
  // \s 匹配所有空白字符（空格、制表符、换行等）
  const hasSpace = /\s/.test(value);
  
  if (hasSpace) {
    // 设置错误提示
    accountError = typea+'不能包含空格，请重新输入';
    console.log(accountError);
    handleLogin(accountError, 1500);
    // 可选：自动去除空格（根据需求选择是否开启）
    // this.use = this.use.replace(/\s/g, '');
    return false;
  } else {
    // 验证通过，清空错误提示
    accountError = '';
    return true;
  }
}
  
// 验证密码账号是否为空
// 1. 表单验证子功能块
const validateForm = () => {
  console.log(use.value, pad.value);

  if (!use.value) {
     handleLogin("请输入账号",1500);
    return false;
  }
  let boole=validateAccount(use.value,"账号");
  if (!boole) return false;
  boole=validateAccount(pad.value,"密码");
if (!boole) return false;
  if (!pad.value) {
     handleLogin("请输入密码",1500);
    // uni.showToast({ title: '请输入密码', icon: 'none' });
    return false;
  }
  // 在uni-app中不建议使用alert，使用uni.showToast提示登录成功
  // 原代码位置在 return true; 之后，属于无法访问的代码，将其移至 return true; 之前
  if (true) { // 表单验证通过
    handleLogin("登陆成功",1500);

    // 跳转到首页
    uni.navigateTo({
    url: '/pages/Login/Hone'
    });
  
}
return true;
  };
// this.loading = true // 显示进度（类似快递已揽收）
// // 调用登录API
// LoginAPI(this.use, this.pad)
//   .then(res => {
//     this.loading = false // 隐藏进度（类似快递已送达）
//     uni.navigateTo({ url: '/pages/index/index' })
//   })
//   .catch(err => {
//     this.loading = false
//     uni.showToast({ title: '登录失败', icon: 'none' })
//   })

// #endregion

// 切换语言函数
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const switchLang = (lang: string) => {
  console.log(lang);
  locale.value = lang; // 改变当前语言
  uni.setStorageSync('lang', lang); // 保存到本地存储，下次打开应用仍生效
};

</script>

<style scoped>
.Login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* margin-top: 40px; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
  min-height: 100vh;
  background-color: #F7FDFF;
  /* background-image: url("/src/static/log/Loginbg3.png"); */
  background-size: 100% 100%;
}

.Login1 {
  /* background-color: #f8f3f1; */
  width: 400px;
  height: 500px;
  margin-top: 77px;
  border-radius: 20px;
  opacity: 1;
  /* 0~1之间，越小越透明 */
}

.Login1-2 {
  /* background-color: darkcyan; */
  height: 125px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.logo {
  /* margin: 5px 5px; */

  width: 300px;
  height: 80px;
  border-radius: 20px;
}

.Login1-3 {
  display: flex;
  /* background-color: aqua; */
  width: 100%;
  height: 75px;
  /* 垂直居中 */
  /* align-items: center;  */
  justify-content: center;
  /* 水平居中 */
}

.Login1-3-text {
  /* font-size: 32rpx; */
  font-size: 25px;
  color: #536d6c;
  transform: scaleX(1.2);
  /* 水平方向拉长1.5倍 */
  letter-spacing: 2px;
}

.Login1-4 {
  /* background-color: mediumseagreen; */
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  /* 水平居中 */
}

.Login1-4-0 {
  /* background-color: #fff; */
  width: 100%;
  height: 125px;

  /* flex-direction: row; */
}

.Login1-4-1 {
  /* background-color: red; */
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  /* 垂直居中 */
  position: relative;
}

.uni-input {
  font-size: 20px;
  width: 90%;
  height: 50px;
  border: 1px solid #000;
  border-radius: 20px;
  padding-left: 20px
}

.fixed-size-input {
  font-family: system-ui, -apple-system, sans-serif;
}

.password-icon {
  width: 24px;
  /* 图标宽度 */
  height: 24px;
  /* 图标高度 */
  position: absolute;
  /* 绝对定位，让图标可以放在输入框内 */
  right: 23px;
  /* 距离输入框右侧15px */
  top: 50%;
  /* 垂直方向居中对齐 */
  transform: translateY(-50%);
  /* 精确居中，就像把地图贴在正中间 */
  color: #838383;
}

.fixed-size-as {
  width: 30px;
  /* 图标宽度 */
  height: 24px;
  /* 图标高度 */
}

.Login1-5 {
  /* background-color: peru; */
  height: 50px;
  padding-top: 15px;
  padding-left: 25px;
}


.Login1-6 {
  /* background-color: bisque; */
  width: 100%;
  height: 15%;
}

.Login1-6-button {
  width: 400px;
  height: 55px;
  background-color: #4c73ee;
  border-radius: 20px;
  font-size: 30px;
  line-height: 55px;
  color: #fff;
}

.Login1-7 {
  /* background-color: darkcyan; */
  height: 50px;
  display: flex;
  justify-content: space-between;
  /* 两个子元素之间的间距 */
}

.Login1-7-1 {
  width: 155px;
  height: 50px;
  /* background-color: greern; */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* 两个子元素之间的间距 */
  /* justify-content: space-between;  */

  justify-content: flex-end;
}

.Login1-7-3 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  width: 16px;
  height: 50px;
}

.Login1-7-2 {
  width: 155px;
  height: 50px;
  background-color: greern;
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

.Login1-7-text1 {
  margin-right: 11px;
  font-size: 20px;
}

.Login1-7-text2 {
  font-size: 20px;
}

.Login1-8 {
  /* margin-top: 150px; */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 150px;
  background-image:url("@/static/log/bouutpm.png");
    /* 图片现在在最上层 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* display: flex; */
  justify-content: center;
  /* 水平居中 */

}

.Login1-8-1 {
  width: 100%;
  height: 60px;
  /* background-color: gerren; */

}

.Login1-8-2 {
  width: 100%;
  height: 80px;
  /* background-color: gerren; */

}

.Login1-8-2-1 {
  margin-top: 20px;
  margin-left: 35px;
  font-size: 23px;
  color: #fff;
  text-align: center;
}
/* 导航栏提示框样式：像冰箱贴一样贴在屏幕上 */
/* 弹出收回动画样式 */
.slide-fade-enter-from, .slide-fade-leave-to {
  /* 动画开始/结束状态：透明且向上偏移 */
  opacity: 0; /* 完全透明 */
  transform: translateX(-50%) translateY(-20px); /* 水平居中 + 向上偏移20px */
}

.slide-fade-enter-active, .slide-fade-leave-active {
  /* 动画过程：300毫秒内平滑过渡 */
  transition: all 0.3s ease; /* all: 所有属性变化都应用动画；0.3s: 动画持续时间；ease: 缓动效果（先快后慢） */
}

.nav-tip {
  
  position: fixed;      /* 固定定位：漂浮在屏幕上 */
  top: 20px;           /* 距离顶部20px */
  left: 50%;           /* 水平居中：左边距50%屏幕宽度 */
  transform: translateX(-50%); /* 水平居中修正：向左移动自身宽度的50% */
  z-index: 9999;       /* 层级最高：确保在所有元素之上 */
  background: rgba(44, 160, 63, 0.7); /* 半透明背景 */
  color: white;        /* 文字白色 */
  padding: 8px 16px;   /* 内边距 */
  border-radius: 4px;  /* 圆角 */
  font-size: 14px;     /* 字体大小 */
  /* 移除原有transition，统一由动画组件控制 */
}
</style>
